<!--
	现场数据占比
	Created by Penglei on 2023/08/08
-->
<template>
  <div>
    <SliderGroup
      :list="arrData"
      titlePosition="up"
      :titleStyle="{
        height: '48px',
        lineHeight: '48px',
      }"
      valuePosition="outside"
           :disabled="true"
    />
  </div>
</template>

<script setup name="OnSiteProportion">
import { onMounted, watch } from 'vue';
// 滑块组
import SliderGroup from '@/components/SliderGroup';
const props = defineProps({
  datas: {
    required: true,
    type: Object,
    default: {},
  },
});
const { datas } = toRefs(props);

watch(
  () => props.datas,
  () => {}
);

const arrData = [
  {
    title: '调查数据',
    value: datas.value.surveyProportion,
  },
  {
    title: '卫星遥感数据',
    value: datas.value.satelliteProportion,
  },
  {
    title: '无人机遥感数据',
    value: datas.value.uavProportion,
  },
  {
    title: '仪器数据',
    value: datas.value.instrumentProportion,
  },
];
// 初始化加载
const init = () => {};
</script>

<style lang="scss" scoped>
// // 滑块组，自定义样式覆盖
// .slider-group {
//     :deep(.el-slider) {
//         // 滑块标记
//         .el-slider__marks {
//             .el-slider__marks-text {
//                 // 若要显示在顶部
//                 margin-top: -25px;
//             }
//         }
//     }
// }
</style>
